<template>
  <div class="page-content">
    <div class="top-box">
      <div class="left">
        <slot name="leftSlot">用户列表</slot>
      </div>
      <div class="right" @click="handleNewClick">
        <el-button>
          <el-icon><Plus /></el-icon>
          <slot name="rightSlot"> 新建用户 </slot>
        </el-button>
      </div>
    </div>
    <wTable
      :listData="dataList"
      v-bind="contentTableConfig"
      :dataCount="dataCount"
      v-model:page="pageInfo"
    >
      <!-- 作用域插槽#enable="scope" enable是插槽的名字 scope是自己在“这个组件”里面定义的名字 -->
      <!-- 可以通过这个scope这个名字来获取对应插槽绑定的“所有值” -->

      <template #createAt="value">
        <span>{{ $filters.formatTime(value.row.createAt) }}</span>
      </template>
      <template #updateAt="value">
        <span>{{ $filters.formatTime(value.row.createAt) }}</span>
      </template>
      <template #handler="scope">
        <div class="handle-btns">
          <el-button
            type="text"
            v-if="isUpdate"
            @click="handleEditClick(scope.row)"
          >
            <el-icon>
              <EditPen />
            </el-icon>
            编辑
          </el-button>
          <el-button
            type="text"
            v-if="isDelete"
            @click="handleDeleteClick(scope.row)"
          >
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
        </div>
      </template>
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.prop]="value"
      >
        <template v-if="item.slotName">
          <slot :name="item.prop" :row="value.row"></slot>
        </template>
      </template>
    </wTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from "vue";
import { EditPen, Delete, Plus } from "@element-plus/icons-vue";
import { useStore } from "@/store";
import { usePermission } from "@/hooks/use-permission";
import wTable from "@/base-ui/table";

export default defineComponent({
  props: {
    contentTableConfig: {
      type: Object,
      required: true,
    },
    pageName: {
      type: String,
      required: true,
    },
  },
  components: {
    wTable,
    EditPen,
    Delete,
    Plus,
  },
  emits: ["editBtnClick", "newBtnClick"],
  setup(props, { emit }) {
    const store = useStore();

    const isCreate = usePermission(props.pageName, "create");
    const isUpdate = usePermission(props.pageName, "update");
    const isDelete = usePermission(props.pageName, "delete");
    const isQuery = usePermission(props.pageName, "query");

    // 双向绑定pageInfo
    const pageInfo = ref({ currentPage: 1, pageSize: 10 });

    watch(pageInfo, () => getPageDate());
    // 发送网络请求
    // 调取getPageListAction 函数获取数据
    const getPageDate = (queryInfo: any = {}) => {
      if (!isQuery) return;
      store.dispatch("systemModule/getPageListAction", {
        // pageUrl: "/users/list",
        pageName: props.pageName,
        queryInfo: {
          offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryInfo,
        },
      });
    };
    getPageDate();

    const dataList = computed(() =>
      store.getters[`systemModule/pageListData`](props.pageName)
    );
    const dataCount = computed(() =>
      store.getters[`systemModule/pageListCount`](props.pageName)
    );

    // 获取其他的动态插槽
    const propSlots = ["createAt", "updateAt", "handler"];
    const otherPropSlots = props.contentTableConfig.propList.filter(
      (item: any) => {
        if (propSlots.indexOf(item.prop) !== -1) {
          return false;
        }
        return true;
      }
    );

    // 5.删除/编辑/新建按钮方法
    const handleDeleteClick = (item: any) => {
      console.log(item);
      store.dispatch("systemModule/deletePageDataAction", {
        pageName: props.pageName,
        id: item.id,
      });
    };

    const handleNewClick = () => {
      emit("newBtnClick");
    };
    const handleEditClick = (item: any) => {
      emit("editBtnClick", item);
    };
    return {
      dataList,
      // userCount,
      getPageDate, //为了可以让别的组件拿到并使用这个方法
      dataCount,
      pageInfo,
      otherPropSlots,
      isUpdate,
      isDelete,
      isCreate,
      handleDeleteClick,
      handleNewClick,
      handleEditClick,
    };
  },
});
</script>

<style scoped lang="less">
.top-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .left {
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
